<template>
  <!-- 三级分类全局组件 -->
  <div>
    <CategorySelector :disable="!isShow"></CategorySelector>
    <!-- isShow 为true 显示AttrList组件  isShow为false 显示AddOrEdit 组件 -->
    <AttrList v-if="isShow" @setShow="setShow"></AttrList>
    <AddOrEdit v-else @cancelShow="cancelShow"></AddOrEdit>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Attr",
});
import { ref } from "vue";
//引入组件
import AttrList from "./components/AttrList.vue";
import AddOrEdit from "./components/AddOrEdit.vue";
//定义开关变量，控制组件的切换
const isShow = ref(true);
//点击AttrList组件中的添加属性值，修改状态
const setShow = (val: boolean) => {
  // console.log(1111);

  isShow.value = val;
};
//点击AddOrEdit组件中的取消按钮，组件关闭
const cancelShow = () => {
  isShow.value = true;
};
</script>

<style scoped lang="scss"></style>
